<template>
  <div class="preview-program">
    <!-- 按钮组 -->
    <div class="Btns-ctrl-body">
      <div class="title" v-text="previewProgramObj.displayName + '详情'"></div>
      <div class="btns f-r btn-preview-program">
        <button type="button"
                class="btn btn-info"
                @click="retProgram"
        >
          方案库
        </button>
        <button type="button"
                class="btn btn-warning"
                @click="upload"
        >
          修改
        </button>
        <button type="button"
                class="btn btn-warning"
                @click="service"
        >
          维护
        </button>
      </div>
    </div>
    <!-- 按钮组关闭 -->
    <div class="item-content">
      <div class="program-displayname" v-text="previewProgramObj.displayName"></div>
      <div class="program-lib-item">
        <div class="item-swrapper" :class="previewProgramObj.type" v-for=" item in previewProgramObj.children" :key="item.id">
          <div class="item">
            <img class="menu-img" :src="PicSrc(item)" :onerror="PicErr" alt="">
            <div class="item-name-swrapper">
              <div class="item-name" v-text="item.displayName"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <vdialog :dialogToggle = uploadToggle
             @btnConfirm = uploadConfirm >
      //头部
      <template slot="dialogHeader" >
        <p v-text="dialogTitle"></p>
      </template>
      //body
      <template slot="dialogBody" >
        <div class="even-row">
          <div class="modal-row" >
            <div class="modal-form-key f-l indispensable" v-text="dialogInputLabel.inputName" ></div>
            <input class="modal-text f-l" type="text" v-model="input_Name" required="required" >
          </div>
          <div class="modal-row" >
            <div class="modal-form-key f-l indispensable" v-text="dialogInputLabel.inputDisplayName"></div>
            <input class="modal-text f-l" type="text" v-model="input_displayName" required="required" >
          </div>
          <div class="modal-row" >
            <div class="modal-form-key f-l indispensable" v-text="dialogInputLabel.selectType" ></div>
            <select v-model="select_type" >
              <option v-for="option in optType" :key="option" v-text="option"></option>
            </select>
          </div>
          <div class="modal-row" >
            <div class="modal-form-key f-l indispensable" v-text="dialogInputLabel.inputSort"></div>
            <input class="modal-text f-l dialog-number" type="number" min="0" v-model.number="input_sort" required="required" >
          </div>
          <div class="modal-row" >
            <div class="modal-form-key f-l" >备注：</div>
            <input class="modal-text f-l" type="text" v-model="textarea_remark" >
          </div>
        </div>
      </template>
    </vdialog>
  </div>
</template>
<script>
  import vdialog from 'sudoku/atom/vdialog'
  import { getNodeChildById, updateMenu } from '@/api/menu'
  export default {
    name: "previewProgram",
    components:{
      vdialog
    },
    created() {
      this.initFn();
    },
    data() {
      return {
        ajaxSearchType: 2,       // 0 菜单 1 数据权限 2 方案
        PicErr: 'this.src="' + require('@/assets/error.png') + '"',  //img加载失败的图片
        previewId: '',
        previewProgramObj: {},     //方案数据
        uploadToggle: false,        //修改弹窗
        dialogTitle: '宫格方案修改',  //修改弹窗的title
        input_displayName: '',     //宫格方案的显示名称
        dialogInputLabel: {
          "inputName": '宫格code：',
          "inputDisplayName": '宫格菜单名称：',
          "selectType": '类型：',
          "inputSort": '排序：'
        },
        input_Name: '',            // 宫格code
        select_type: '',
        optType: ['九宫格', '十宫格'],
        textarea_remark: '',
        input_sort: 0
      }
    },
    methods:{
      initFn() {
        // 刷新操作
        if(this.$route.params.previewId != undefined){ // 路由传值
          this.previewId = this.$route.params.previewId;
          sessionStorage.setItem('previewId', this.previewId);
        }
        else if(sessionStorage.getItem('previewId') != undefined){  //本页面刷新
          this.previewId = sessionStorage.getItem('previewId')
        }
        else {  //未知刷新
          this.$router.push({name: 'menuLinkLib', params:{ajaxSearchType:this.ajaxSearchType}})
          return;
        }
        this.$axios({
          url: this.HOST+'/menu/getNodeChildById?id='
            + this.previewId,
          method: 'get'
        }).then(res => {
          this.previewProgramObj = res.data;
        })
        /*getNodeChildById(this.previewId).then(res => {
          this.previewProgramObj = res.data;
        })*/
      },
      /**
       * 返回文件服务的地址
       */
      PicSrc(item) {
        if(item != null && item.imgModel != null
          && item.imgModel.storeId != null){
          let storeId = item.imgModel.storeId
          return baseURL                                          //运行环境
            + 'api/jp-TIFS-FileCenter-ms/file?businessId='  //微服务地址
            + storeId
        }
      },
      //返回方案库
      retProgram() {
        this.$router.push({path:'/programLib'})
      },
      upload() {
        this.input_Name = this.previewProgramObj.name;
        this.input_displayName = this.previewProgramObj.displayName;
        this.textarea_remark = this.previewProgramObj.remark;
        this.input_sort = this.previewProgramObj.sort;
        this.select_type = this.switchFn(this.previewProgramObj.type);
        this.uploadToggle = !this.uploadToggle;
      },
      uploadConfirm() {
        if(this.input_Name == '' | this.input_displayName == '' | this.select_type == '' ){
          this.s_alert('必选项不能为空');
          // alert('必选项不能为空');
        }
        else {
          let type = this.switchFn(this.select_type);
          let data = {
            "children": this.previewProgramObj.children,
            "displayName": this.input_displayName,
            "id": this.previewId,
            "imgModel": this.previewProgramObj.imgModel,
            "linkModel": this.previewProgramObj.linkModel,
            "name": this.input_Name,
            "pid": this.previewProgramObj.pid,
            "remark": this.textarea_remark,
            "sort": this.input_sort,
            "target": this.previewProgramObj.target,
            "type": type,
          }
          this.$axios({
            url:this.HOST+'/menu/update',
            method:'post',
            headers: {'content-type': 'application/json;charset=UTF-8'},
            data:JSON.stringify(data)
          }).then( res => {
            this.uploadToggle = !this.uploadToggle;
            this.s_alert('修改成功')
            // alert('修改成功')
            this.refreshPage()
          })
         /* updateMenu(data).then( res => {
            this.uploadToggle = !this.uploadToggle;
            alert('修改成功')
            this.refreshPage()
          })*/
        }
      },
      refreshPage(){
        this.$axios({
          url:this.HOST+ '/menu/getNodeChildById?id='
            + this.previewId,
          method: 'get'
        }).then(res => {
          this.previewProgramObj = res.data;
        })
        /*getNodeChildById(this.previewId).then(res => {
          this.previewProgramObj = res.data;
        })*/
      },
      //类型选择转换
      switchFn(str){
        switch (str){
          case 'WPF_9':
            return '九宫格';
          case 'WPF_10':
            return '十宫格';
          case '九宫格':
            return 'WPF_9';
          case '十宫格':
            return 'WPF_10';
        }
      },
      service(){
        if(this.previewId == ''){
          this.s_alert('请先选择');
          //alert('请先选择');
        }
        this.$router.push({name:'menuLinkLib', params:{dataProgramItem:this.previewProgramObj,ajaxSearchType:this.ajaxSearchType}});
      }
    }//methods end
  }
</script>

<style lang="scss" scoped="">
  .preview-program {
    width: 100%;
    height: 100%;
    .title {
      text-align: center;
      font-size: 20px;
      line-height: 30px;
      font-weight: 700;
    }
    .btn-preview-program {
      margin-top: -30px;
      margin-bottom: 10px;
    }
    .item-content{
      width: 100%;
      height: calc(100% - 10px);
      margin-top: 10px;
      background-color: #002543;
      background-image: url(../../../assets/bg_program.png);
      background-size: 100% 100%;
      .program-displayname {
        color: #fff;
        text-align: center;
        line-height: 26px;
        font-size: 16px;
      }
      .program-lib-item {
        color: #fff;
        margin-top: 3%;
        padding: 0 2% 0 4%;
        height: 83%;
        display: flex;
        flex-wrap: wrap;
        overflow: auto;
        &::-webkit-scrollbar{
          display:none;
        }
        .item-swrapper {
          position: relative;
          flex: 0 0 33.3333%;
          height: 33.33333%;
          min-height: 112px;
          border-radius: 4px;
          overflow: hidden;
          text-align: center;
          .item {
            position: relative;
            width: 193px;
            height: 165px;
            display: inline-block;
            background-image: url(../../../assets/bg_program_item.png);
            background-size: 100% 100%;
            background-position: center center;
            .item-name-swrapper {
              position: absolute;
              bottom: 33%;
              left: 0;
              right: 0;
              .item-name {
                font-size: 12px;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }

            .menu-img {
              display: inline-block;
              width: 70px;
              padding-top: 10%;
              margin: 0 auto;
            }
          }
        }
        .WPF_9 {
          flex: 0 0 33.3333%
        }
        .WPF_10 {
          flex: 0 0 25%;
        }
      }
    }
  }
</style>
